<template>
  <div class="user-page">
    <div class="bg">
      <img src="http://liufusong.top:8080/img/profile/bg.png" alt="" />
    </div>
    <div class="my_info">
      <div class="icon">
        <img :src="avatar" alt="" />
      </div>
      <div class="username">{{ username }}</div>
      <div class="loginbtn" ref="loginbtn">
        <van-button
          color="#21b97a"
          size="small"
          type="primary"
          @click="statusCheck"
          >&nbsp;&nbsp;{{ btnTxt }}&nbsp;&nbsp;</van-button
        >
      </div>
      <div class="editInfo" v-if="isShow">编辑个人资料</div>
    </div>
    <div class="my_set">
      <van-grid :column-num="3" :border="false" icon-size="20px">
        <van-grid-item to="/collect" icon="star-o" text="我的收藏" style="height: 90px" />
        <van-grid-item to="/myrent" icon="wap-home-o" text="我的出租" style="height: 90px" />
        <van-grid-item icon="clock-o" text="看房记录" style="height: 90px" />
        <van-grid-item icon="credit-pay" text="成为房主" style="height: 90px" />
        <van-grid-item icon="contact" text="个人资料" style="height: 90px" />
        <van-grid-item icon="service-o" text="联系我们" style="height: 90px" />
      </van-grid>
    </div>
    <div class="ad">
      <img src="http://liufusong.top:8080/img/profile/join.png" alt="" />
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { getUserinfo } from "@/api/user";
import { getToken, delToken } from "@/utils/storage";
export default {
  name: "user-page",
  data() {
    return {
      btnTxt: "去登录",
      username: "游客",
      info: {},
      isShow: false,
      avatar:"http://liufusong.top:8080/img/profile/avatar.png"
    };
  },
  async created() {
    const res = await getUserinfo();
    this.info = res.body;
    // console.log(res);
    if (res.status === 200) {
      this.btnTxt = "退出登录";
      this.username = this.info.nickname;
      this.info.avatar = 'https://img2.baidu.com/it/u=3749324151,2811317447&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500'
      this.avatar = this.info.avatar;
      this.$refs.loginbtn.style.top = "52%";
      this.isShow = true;
    } else {
      delToken()
    }
  },
  methods: {
    statusCheck() {
      const token = getToken();
      if (token) {
        Dialog.confirm({
          title: "提示",
          message: "是否确定退出？",
          confirmButtonText:'退出',
          confirmButtonColor:'#2b9beb',
          width:'270px'
        })
          .then(() => {
            // on confirm
            delToken();
            this.btnTxt = "去登录";
            this.username = "游客";
            this.$refs.loginbtn.style.top = "60%";
            this.isShow = false;
            this.avatar = "http://liufusong.top:8080/img/profile/avatar.png"
          })
          .catch(() => {
            // on cancel
          });
      } else {
        this.$router.push("/login");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.bg {
  img {
    width: 100%;
  }
}
.my_info {
  position: relative;
  width: 85%;
  height: 160px;
  transform: translateY(-60px);
  z-index: 100;
  margin: 0 auto;
  box-shadow: 1px 2px 5px 3px #eaeaea;
  background-color: #fff;
  
  .icon {
    position: absolute;
    overflow: hidden;
    top: -20%;
    left: 50%;
    width: 59px;
    height: 60px;
    transform: translateX(-50%);
    border-radius: 50%;
    border: 5px solid #f5f5f5;
    box-shadow: 1px 3px 2px #cdcdcd;
    img {
      width: 60px;
      height: 60px;
    }
  }
  .username {
    position: absolute;
    top: 33%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
  }
  .loginbtn {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translateX(-50%);
    .link {
      display: block;
      width: 65px;
      height: 30px;
      border-radius: 6px;
      font-size: 12px;
      border: 0;
      background-color: #21b97a;
      color: #fff;
    }
  }
  .editInfo {
    position: absolute;
    color: #999;
    font-size: 12px;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
  }
}
.my_set {
  transform: translateY(-45px);
}
.ad {
  width: 90%;
  margin: 0 auto;
  transform: translateY(-30px);
  img {
    width: 100%;
  }
}
</style>
